<template>
  <div class="comment-wrapper">
    <div class="img-wrapper">
      <img :src="commentData.commentator_avatar"
           alt="">
    </div>

    <div class="comment">
      <div class="user-wrapper">
        <p class="nickname">{{ commentData.commentator_nickname || commentData.commentator_id }}</p>
        <p class="age">{{ createTime }}</p>
        <span class="delete"
              v-if="isCanDelete"
              @click="handleDelete"></span>
      </div>

      <div class="content">
        {{ commentData.content }}
      </div>
    </div>
  </div>
</template>

<script>
import m from 'moment/min/moment.min';
export default {
  name: 'Comment',
  props: {
    commentData: {
      type: Object,
      required: true
    },
    userInfo: {
      type: Object,
    }
  },
  computed: {
    createTime () {
      return m(this.commentData.time).format('YYYY-MM-DD  HH:mm:ss')
    },
    isCanDelete () {
      const uid = this.$parent.$route.query.uid
      return this.userInfo && this.userInfo.user_id == uid
    }
  },
  methods: {
    handleDelete () {
      this.$confirm_({
        title: '确定删除该评论？',
        desc: '删除评论后无法恢复哦~',
        cancelCb: () => {
          console.log('关闭');
        },
        confirmCb: (_confirm) => {
          if (_confirm.loading) {
            return
          }
          _confirm.loading = true;

          const { commentator_id, time } = this.commentData
          const { user_id, token } = this.userInfo
          const recording_id = this.$parent.$route.query.recid
          this.$api.comment.deleteComment({
            recording_id,
            user_id,
            token,
            commentator_id,
            comment_timeStamp: time,
          }).then(data => {
            if (data.code > 0) {
              this.$message({
                message: '删除成功',
                duration: 1500,
              });

              this.$emit('deleteComment', commentator_id, time)
            } else {
              this.$message({
                message: '删除失败',
                duration: 1500,
              });
            }
          }).catch(() => {
            this.$message({
              message: '删除失败',
              duration: 1500,
            });
          });
        }
      })
    }
  },
  created () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.comment-wrapper {
  display: flex;
  align-items: flex-start;
  padding-bottom: 0.24rem;
  .img-wrapper {
    flex: 0 0 0.72rem;
    height: 0.72rem;
    line-height: 0;
    img {
      width: 100%;
      height: 100%;
      background-color: #999;
      border-radius: 50%;
    }
  }
  .comment {
    flex: 1;
    margin-left: 0.16rem;
    .user-wrapper {
      position: relative;
      margin-top: 0.09rem;
      .nickname {
        margin-bottom: 0.11rem;
        font-size: 0.28rem;
        font-weight: bold;
        line-height: 1;
      }
      .age {
        font-size: 0.22rem;
        line-height: 1;
        color: #999;
      }
      .delete {
        position: absolute;
        right: 0;
        top: 50%;
        height: 0.48rem;
        width: 0.48rem;
        transform: translateY(-50%);
        color: #ff5050;
        font-size: 0.24rem;
        background-image: url("../assets/删除48X48@2x.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
      }
      .praise {
        position: absolute;
        right: 0;
        top: 0.15rem;
        font-size: 0.24rem;
        color: #999;
        .icon {
          display: inline-block;
          margin-right: 0.1rem;
          width: 0.22rem;
          height: 0.24rem;
          background-image: url("../assets/赞（灰色）48X48@2x.png");
          background-repeat: no-repeat;
          background-size: 100%;
          vertical-align: bottom;
        }
        &.active {
          color: #ff5050;
          .icon {
            background-image: url("../assets/已点赞24X24@2x.png");
          }
        }
      }
    }

    .content {
      margin-top: 0.2rem;
      padding: 0.16rem 0.24rem;
      background-color: #f4f4f4;
      border-radius: 0.04rem;
      font-size: 0.32rem;
      color: #000;
      word-break: break-all;
    }
  }
}
</style>
